<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<style>
    .img-container {
        position: relative;
        border: 1px solid #ccc;
        width: 1600px;
        height: 400px;
        max-width: 100%;
        max-height: 100%;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .img-list img {
        width: 300px;
        height: 300px;
        object-fit: cover;
        margin: 10px;
    }
</style>
<body>
<div class="layui-form layuimini-form">

    <input autocomplete="off" class="layui-input" name="userId" th:value="${user.userId}"
           type="hidden">
    <input autocomplete="off" class="layui-input" name="orderNum" th:value="${order.orderNum}"
           type="hidden">
    <input autocomplete="off" class="layui-input" name="orderId" th:value="${order.orderId}"
           type="hidden">
    <input autocomplete="off" class="layui-input" name="orderInfoId" th:value="${orderInfo.orderInfoId}"
           type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">订单描述</label>
        <div class="layui-input-block">
            <input autocomplete="off" lay-verify="required" th:value="${orderInfo.orderInfoName}" lay-reqtext="订单描述不可为空" class="layui-input" name="orderInfoName" placeholder="订单描述" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">代取人姓名</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" th:value="${orderInfo.orderUserName}" lay-verify="required" lay-reqtext="代取人姓名不可为空"  name="orderUserName" placeholder="代取人姓名" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" th:value="${orderInfo.orderInfoTel}"  lay-verify="required" lay-reqtext="联系电话不可为空"  name="orderInfoTel" placeholder="联系电话" type="tel">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">代取校区</label>
        <div class="layui-input-inline">
            <select id="orderInfoArea" name="orderInfoArea" >
                <option value="new">新区</option>
                <option value="mid">中</option>
                <option value="old">老区</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">快递站点</label>
        <div class="layui-input-block">
            <input autocomplete="off" lay-verify="required" th:value="${orderInfo.orderInfoNet}" lay-reqtext="快递站点不可为空" class="layui-input" name="orderInfoNet" placeholder="快递站点" type="text">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">送达时间</label>
        <div class="layui-input-inline">
            <input type="text" name="orderInfoNeedTime" th:value="${#calendars.format(orderInfo.orderInfoNeedTime, 'yyyy-MM-dd HH:mm:ss')}" lay-verify="required" lay-reqtext="送达时间不可为空" id="orderInfoNeedTime" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">送达楼层</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" th:value="${orderInfo.orderInfoSeorey}" name="orderInfoSeorey" lay-verify="required" lay-reqtext="送达楼层不可为空"
                   placeholder="送达楼层" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" th:value="${orderInfo.orderPrice}" name="orderPrice" lay-verify="required" lay-reqtext="价格不可为空"
                   placeholder="价格" type="number">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <div class="img-container">
                <div id="imgList" class="img-list"></div>
            </div>
        </div>
        <div class="layui-input-block">
            <button type="button" id="uplodImg" class="layui-btn">上传</button>
            <button type="button" id="reset" class="layui-btn">重置</button>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="orderInfoDes" th:text="${orderInfo.orderInfoDes}" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            upload = layui.upload,
            miniTab = layui.miniTab,
            $ = layui.$;

        var imgLists = [];
        //日期
        laydate.render({
            elem: '#orderInfoNeedTime',
            type: 'datetime',
            range: false,
            format: 'yyyy-MM-dd HH:mm:ss'
        });
        $(window).load(function(){
            var photoList = [[${orderInfo.orderPhotoList}]];
            for(var i=0; i<photoList.length; i++){
                var imgHtml='<img class="thisImg" src="'+photoList[i].orderPhotoUrl+'" />';
                $('#imgList').append(imgHtml);
            };
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var datas = data.field;

            var index = layer.alert("确认提交？", {
                title: '提示'
            }, function () {
                $.ajax({
                    url: '/order/edits?imgList='+imgLists,
                    type: "POST",
                    data: datas,
                    success: function (data) {
                        if (data.code == 200) {
                            layer.alert(data.message,{
                                title: "提示",
                            },function (index){
                                // 关闭弹出层
                                layer.close(index);
                            })
                        }else{
                            layer.alert(data.message,{
                                title: "提示",
                            },function (index){
                                // 关闭弹出层
                                layer.close(index);
                            })
                        }
                    }
                });

            });
            return false;
        });
        //普通图片上传开始
        var uploadInst = upload.render({
            elem: '#uplodImg',
            url: '/order/uploadMongoDb',
            size: 600, //限制文件大小，单位 KB
            multiple: true,
            before: function(obj){
                // 删除之前上传的文件
                delete obj.preview;
            },
            //后台返回数据
            done: function (res) {
                var imgUrls = [];
                imgUrls.push(res.data);
                //在页面上显示上传的图片
                for(var i=0; i<imgUrls.length; i++){
                    var imgHtml='<img class="thisImg" src="'+imgUrls[i]+'" />';
                    $('#imgList').append(imgHtml);
                };
                imgLists.push(res.data);
            },
        });

        $("#reset").click(function (){
            imgLists = [];
            $('.thisImg').css('display', 'none');
        });

    });
</script>
</body>
</html>